<script setup lang="ts">
import { ref, onMounted,getCurrentInstance ,onUnmounted, watch} from 'vue'
import * as echarts from 'echarts';
import { ArrowLeftBold } from '@element-plus/icons-vue'; // 确保导入了图标

// 图表实例声明
const chartRef = ref<HTMLDivElement | null>(null);
let pieChart: echarts.ECharts | null = null;
const barChartRef = ref<HTMLDivElement | null>(null);
let barChart: echarts.ECharts | null = null;
const ageChartRef = ref<HTMLDivElement | null>(null);
let ageChart: echarts.ECharts | null = null;
const cityChartRef = ref<HTMLDivElement | null>(null);
let cityChart: echarts.ECharts | null = null;
// 接收父组件传递的 props
const props = defineProps<{
  filmid: string;
}>()

  const markSheetList = ref(null)
  const global=getCurrentInstance().appContext.config.globalProperties;
  // 在组件挂载后发起请求
  onMounted(() => {
    global.$http.post('/public/marksheet/query', {
      // 直接传递到请求体，不要放在 params 里
      scoreid: props.filmid
    })
        .then(resp => {
          console.log('查询结果:', resp.data)
          markSheetList.value = resp.data;
        })
        .catch(err => {  // 用 catch 捕获错误
          console.error('请求失败:', err)
        })
  })

  const filmDetail = ref(null)
  const global1=getCurrentInstance().appContext.config.globalProperties;
  // 在组件挂载后发起请求
  onMounted(() => {
    global1.$http.post('/public/film/query', {
      // 直接传递到请求体，不要放在 params 里
      filmid: props.filmid
    })
        .then(resp => {
          console.log('查询结果:', resp.data)
          // 假设接口返回的是数组，取第一个元素（单条详情）
          filmDetail.value = resp.data[0] || null;
        })
        .catch(err => {  // 用 catch 捕获错误
          console.error('请求失败:', err)

        })
  })
  // 定义评分区间映射
  const columnToNameMap = {
    nineToTen: '9-10分',
    sevenToEight: '7-8分',
    fiveToSix: '5-6分',
    threeToFour: '3-4分',
    oneToTwo: '1-2分'
  };
  // 格式化饼图数据
  const formatPieData = () => {
    // 边界判断：如果没有数据，返回空数组（避免图表报错）
    if (!markSheetList.value || markSheetList.value.length === 0) return [];

    // 假设数据是数组，取第一条数据
    const row = markSheetList.value[0];
    if (!row) return [];

    // 遍历映射关系，提取需要的数据
    const result = [];
    Object.entries(columnToNameMap).forEach(([column, name]) => {
      if (row[column] !== undefined) {
        result.push({
          name: name,
          value: row[column]
        });
      }
    });
    return result;
  };
  // 初始化饼图：创建或更新饼图实例
  const initPieChart = () => {
    if (chartRef.value) {
      // 如果已有饼图实例，先销毁
      if (pieChart) pieChart.dispose();
      // 初始化饼图实例，挂载到chartRef对应的DOM元素上
      pieChart = echarts.init(chartRef.value);
      const option = {
        tooltip: {
          trigger: 'item', // 鼠标悬停时触发提示
          formatter: '{b}: {d}%' // 提示内容格式：名称: 百分比
        },
        series: [ // 数据系列（饼图的核心数据配置）
          {
            name: '评分', // 系列名称（用于 tooltip 显示）
            type: 'pie', // 图表类型：饼图
            radius: ['40%', '80%'], // 饼图半径（内圆40%，外圆80%，形成环形）
            center: ['50%', '50%'], // 饼图中心位置（相对于容器的百分比）
            label: { // 饼图标签（显示在外侧的文字）
              show: true,
              formatter: '{b}:{d}%',
              fontSize: 9,
              position: 'outside'
            },
            labelLine: {
              show: true,
              length: 5, // 第一段线长度
              length2: 10, // 第二段线长度
              lineStyle: { // 线样式
                color: '#666',
                width: 1
              }
            },
            data: formatPieData() // 饼图数据（调用上面定义的格式化函数）
          }
        ]
      };

      // 将配置项应用到饼图实例
      pieChart.setOption(option);
      // 调整图表大小以适应容器
      pieChart.resize();
    }
  };

  /* 性别分类评分柱状图配置 */
  const formatBarData = () => {
    // 边界判断：无数据时返回默认值
    if (!markSheetList.value || markSheetList.value.length === 0) {
      return {
        categories: ['男性', '女性'], // y轴分类
        scores: [0, 0] // x轴数据（默认0）
      };
    }

    // 从第一条数据中提取男女评分
    const row = markSheetList.value[0];
    return {
      categories: ['男性', '女性'], // y轴显示"男性"和"女性"
      scores: [
        row.man || 0,   // 男性评分（如果字段不存在，默认0）
        row.woman || 0  // 女性评分（如果字段不存在，默认0）
      ]
    };
  };

  // 初始化性别分类评分柱状图
  const initBarChart = () => {
    // 确保柱状图容器已渲染
    if (barChartRef.value) {
      // 销毁已有实例（避免重复创建）
      if (barChart) barChart.dispose();

      // 初始化柱状图实例
      barChart = echarts.init(barChartRef.value);
      // 获取格式化后的柱状图数据
      const barData = formatBarData();

      // 柱状图配置项
      const option = {
        tooltip: {
          trigger: 'axis', // 按坐标轴触发提示
          formatter: '{b}: {c}分' // 提示内容：名称: 分数
        },
        grid: { // 图表网格（控制图表与容器边缘的距离）
          left: '3%',
          right: '4%',
          bottom: '3%',
          top:'3%',
          containLabel: true // 确保标签不被裁剪
        },
        yAxis: { // y轴配置
          type: 'category', // 分类轴（用于显示文本分类）
          data: barData.categories, // y轴数据（男性、女性）
          axisLabel: { fontSize: 12 } // y轴标签字体大小
        },
        xAxis: { // x轴配置
          type: 'value', // 数值轴（用于显示评分）
          min: 0, // 最小值0
          max: 10, // 最大值10（评分通常0-10分）
          axisLabel: {
            formatter: '{value}分' // x轴标签显示"分"单位
          }
        },
        series: [ // 柱状图数据系列
          {
            name: '用户评分', // 系列名称
            type: 'bar', // 图表类型：柱状图
            data: barData.scores, // 数据（男性评分、女性评分）
            itemStyle: { color: 'orange' }, // 柱子颜色
            barWidth: '40%' // 柱子宽度（相对于分类间距的百分比）
          }
        ]
      };

      // 应用配置项到柱状图
      barChart.setOption(option);
      // 调整大小适应容器
      barChart.resize();
    }
  };

/* 年龄分类评分柱状图配置 */
const formatAgeData = () => {
  // 边界判断：无数据时返回默认值
  if (!markSheetList.value || markSheetList.value.length === 0) {
    return {
      categories: ['20岁以下', '20-24岁','25-29岁','30-34岁','35-39岁','40岁以上'], // x轴分类
      scores: [0,0,0,0,0,0] // y轴数据（默认0）
    };
  }

  // 从第一条数据中提取年龄评分
  const row = markSheetList.value[0];
  return {
    categories: ['20岁以下', '20-24岁','25-29岁','30-34岁','35-39岁','40岁以上'], // x轴显示年龄区间
    scores: [
      row.belowTwenty || 0,  // 20岁以下评分（如果字段不存在，默认0）
      row.twentyToTwentyFour || 0,  // 20-24岁评分（如果字段不存在，默认0）
      row.twentyFiveToTwentyNine || 0,  // '25-29岁'评分（如果字段不存在，默认0）
      row.thirtyToThirtyFour || 0,  //'30-34岁'评分（如果字段不存在，默认0）
      row.thirtyFiveToThirtyNine || 0,  // '35-39岁'评分（如果字段不存在，默认0）
      row.overForty || 0,  // '40岁以上'评分（如果字段不存在，默认0）
    ]
  };
};

// 初始化性别分类评分柱状图
const initAgeChart = () => {
  // 确保柱状图容器已渲染
  if (ageChartRef.value) {
    // 销毁已有实例（避免重复创建）
    if (ageChart) ageChart.dispose();

    // 初始化柱状图实例
    ageChart = echarts.init(ageChartRef.value);
    // 获取格式化后的柱状图数据
    const ageData = formatAgeData();

    // 柱状图配置项
    const option = {
      tooltip: {
        trigger: 'axis', // 按坐标轴触发提示
        formatter: '{b}: {c}分' // 提示内容：名称: 分数
      },
      grid: { // 图表网格（控制图表与容器边缘的距离）
        left: '3%',
        right: '4%',
        bottom: '3%',
        top:'5%',
        containLabel: true // 确保标签不被裁剪
      },
      xAxis: { // x轴配置
        type: 'category', // 分类轴（用于显示文本分类）
        data: ageData.categories, // x轴数据（年龄区间）
        axisLabel: { fontSize: 8 } // x轴标签字体大小
      },
      yAxis: { // y轴配置
        type: 'value', // 数值轴（用于显示评分）
        min: 0, // 最小值0
        max: 10, // 最大值10（评分通常0-10分）
        axisLabel: {
          formatter: '{value}分' // y轴标签显示"分"单位
        }
      },
      series: [ // 柱状图数据系列
        {
          name: '用户评分', // 系列名称
          type: 'bar', // 图表类型：柱状图
          data: ageData.scores, // 数据
          itemStyle: { color: 'orange' }, // 柱子颜色
          barWidth: '40%' // 柱子宽度（相对于分类间距的百分比）
        }
      ]
    };

    // 应用配置项到柱状图
    ageChart.setOption(option);
    // 调整大小适应容器
    ageChart.resize();
  }
};

/* 城市分类评分柱状图配置 */
const formatCityData = () => {
  // 边界判断：无数据时返回默认值
  if (!markSheetList.value || markSheetList.value.length === 0) {
    return {
      categories: ['一线城市', '二线城市','三线城市','四线城市'], // x轴分类
      scores: [0,0,0,0] // y轴数据（默认0）
    };
  }

  // 从第一条数据中提取年龄评分
  const row = markSheetList.value[0];
  return {
    categories: ['一线城市', '二线城市','三线城市','四线城市'], // x轴显示城市区间
    scores: [
      row.firstCity || 0,  // 一线城市评分（如果字段不存在，默认0）
      row.secondCity || 0,  // 二线城市评分（如果字段不存在，默认0）
      row.thirdCity || 0,  // 三线城市评分（如果字段不存在，默认0）
      row.fourthCity || 0,  //四线城市评分（如果字段不存在，默认0）
    ]
  };
};

// 初始化城市分类评分柱状图
const initCityChart = () => {
  // 确保柱状图容器已渲染
  if (cityChartRef.value) {
    // 销毁已有实例（避免重复创建）
    if (cityChart) cityChart.dispose();

    // 初始化柱状图实例
    cityChart = echarts.init(cityChartRef.value);
    // 获取格式化后的柱状图数据
    const cityData = formatCityData();

    // 柱状图配置项
    const option = {
      tooltip: {
        trigger: 'axis', // 按坐标轴触发提示
        formatter: '{b}: {c}分' // 提示内容：名称: 分数
      },
      grid: { // 图表网格（控制图表与容器边缘的距离）
        left: '3%',
        right: '4%',
        bottom: '3%',
        top:'5%',
        containLabel: true // 确保标签不被裁剪
      },
      xAxis: { // x轴配置
        type: 'category', // 分类轴（用于显示文本分类）
        data: cityData.categories, // x轴数据（城市区间）
        axisLabel: { fontSize: 12 } // x轴标签字体大小
      },
      yAxis: { // y轴配置
        type: 'value', // 数值轴（用于显示评分）
        min: 0, // 最小值0
        max: 10, // 最大值10（评分通常0-10分）
        axisLabel: {
          formatter: '{value}分' // y轴标签显示"分"单位
        }
      },
      series: [ // 柱状图数据系列
        {
          name: '用户评分', // 系列名称
          type: 'bar', // 图表类型：柱状图
          data: cityData.scores, // 数据
          itemStyle: { color: 'orange' }, // 柱子颜色
          barWidth: '40%' // 柱子宽度（相对于分类间距的百分比）
        }
      ]
    };

    // 应用配置项到柱状图
    cityChart.setOption(option);
    // 调整大小适应容器
    cityChart.resize();
  }
};

  //数据监听：当数据变化时自动更新图表
  // 监听markSheetList的变化（评分数据变化时）
  watch(markSheetList, () => {
    initPieChart();  // 更新饼图
    initBarChart();  // 更新性别分类评分数据柱状图
    initAgeChart();  // 更新年龄分类评分数据柱状图
    initCityChart();  // 更新城市分类评分数据柱状图
  });

  //组件初始化和生命周期管理
  // 组件挂载完成后执行（页面DOM已渲染）
  onMounted(() => {
    // 延迟100ms初始化图表：确保DOM完全渲染完成
    setTimeout(() => {
      initPieChart();  // 初始化饼图
      initBarChart();  // 初始化性别分类评分数据柱状图
      initAgeChart();  // 初始化年龄分类评分数据柱状图
      initCityChart(); // 初始化城市分类评分数据柱状图
    }, 100);

    // 监听窗口大小变化，动态调整图表大小
    window.addEventListener('resize', handleResize);
  });

  // 窗口大小变化时触发：调整图表大小
  const handleResize = () => {
    if (pieChart) pieChart.resize();  // 调整饼图
    if (barChart) barChart.resize();  // 调整性别分类评分数据柱状图
    if(ageChart) ageChart.resize();   // 调整年龄分类评分数据柱状图
    if(cityChart) cityChart.resize();   // 调整城市分类评分数据柱状图
  };

  // 组件卸载时执行：清理资源，避免内存泄漏
  onUnmounted(() => {
    // 销毁图表实例
    if (pieChart) pieChart.dispose();
    if (barChart) barChart.dispose();
    if(ageChart) ageChart.dispose();
    if(cityChart) cityChart.dispose();
    // 移除窗口大小监听事件
    window.removeEventListener('resize', handleResize);
  });
</script>

<template>
  <el-affix :offset-top="0" :z-index="999">
    <el-col :span="24">
      <div style="background: #666666;">
        <el-icon :size="20" @click="$router.back()" style="color: white; margin: 8px;">
          <ArrowLeftBold />
        </el-icon>
        <span style="color: white;font-size: 20px;">营销数据</span>
      </div>
    </el-col>
  </el-affix>
  <div v-if="filmDetail">
  <div style="background: black;color: white">
    <!--电影图片 名字 电影类型 上映时间  -->
    <el-row>
      <el-col :span="4" style="margin: 5px ;">
        <el-image :src="filmDetail.filmurl"></el-image>
      </el-col>
      <el-col :span="9" style="margin-left: 4px">
        <div style="font-size: 20px">{{ filmDetail.filmname }}</div>
        <div style="font-size: 12px">{{filmDetail.filmtype}}</div>
        <div style="font-size: 12px">{{ filmDetail.releasedate }}中国大陆上映</div>
      </el-col>
    </el-row>
  </div>

<!--猫眼评分 分数占比饼图  -->
  <div class="kobei">
    <el-row > <!-- 垂直居中对齐 -->
      <el-col :span="6">
        <div>
          <span style="font-size: 18px">猫眼口碑</span>
          <span style="color: orange;font-size: 35px">{{filmDetail.filmscore}}分</span>
        </div>
      </el-col>
      <el-col :span="18">
        <!-- 明确宽高，防止渲染异常 -->
        <div ref="chartRef" style="width: 250px; height: 150px;"></div>
      </el-col>
    </el-row>
  </div>
<!--不同性别用户评分-->
    <div style="margin-top: 10px;">
      <el-row>
        <el-col :span="24">
          <div style="font-size: 16px;">不同性别用户评分</div>
          <div style="display: flex;justify-content: center">
           <div ref="barChartRef" style="width: 250px; height: 150px;"></div>
          </div>
        </el-col>
      </el-row>
    </div>
<!--不同年龄用户评分-->
    <div style="margin-top: 10px;">
      <el-row>
        <el-col :span="24">
          <div style="font-size: 16px;">不同年龄用户评分</div>
          <div style="display: flex;justify-content: center">
            <div ref="ageChartRef" style="width: 100%; height: 250px;"></div>
          </div>
        </el-col>
      </el-row>
    </div>
<!--不同地域评分 -->
    <div style="margin-top: 10px;">
      <el-row>
        <el-col :span="24">
          <div style="font-size: 16px;">不同地域评分</div>
          <div style="display: flex;justify-content: center">
            <div ref="cityChartRef" style="width: 100%; height: 250px;"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
<!-- 数据加载中或为空时显示 -->
  <div v-else>
    加载中...
  </div>
</template>

<style scoped>
.koubei{
  border-radius: 8px;
  padding: 5px;
}
</style>